<h2>User Avatars</h2>
<h3>Initials</h3>
<table class="user-avatars">
  <thead>
    <tr>
      <th></th>
      <th>xl</th>
      <th>l</th>
      <th>m</th>
      <th>s</th>
      <th>xs</th>
      <th>xxs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Plain</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Selected</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Pending</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Blocked</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Unknown</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
  </tbody>
</table>
<h3>Image</h3>
<table class="user-avatars">
  <thead>
    <tr>
      <th></th>
      <th>xl</th>
      <th>l</th>
      <th>m</th>
      <th>s</th>
      <th>xs</th>
      <th>xxs</th>
    </tr>
  </thead>
  <tbody>
    <tr class="user-avatars-image">
      <td>Image</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-1" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Selected</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 selected" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Pending</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 pending" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Blocked</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 blocked" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Unknown</td>
      <td>
        <participant-avatar class="user-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="user-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-1 unknown" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-initials">JD</div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-badge"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
  </tbody>
</table>
<h2>Service Avatars</h2>
<table class="user-avatars">
  <thead>
    <tr>
      <th></th>
      <th>xl</th>
      <th>l</th>
      <th>m</th>
      <th>s</th>
      <th>xs</th>
      <th>xxs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Plain</td>
      <td>
        <participant-avatar class="service-avatar avatar-xl">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-l">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-m">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-s">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-xs">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-xxs">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
    <tr>
      <td>Image</td>
      <td>
        <participant-avatar class="service-avatar avatar-xl avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-l avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-m avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-s avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-xs avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
      <td>
        <participant-avatar class="service-avatar avatar-xxs avatar-image-loaded">
          <div class="participant-avatar accent-color-bot" data-bind="css: css_classes(), click: on_click">
            <div class="avatar-background"></div>
            <div class="avatar-service-placeholder">
              <svg width="32" height="32" viewBox="0 0 32 32">
                <path d="M10.5 12A6.5 6.5 0 0 0 4 18.5V24a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5.5a6.5 6.5 0 0 0-6.5-6.5h-11zm-7.12-1.22L.24 4.95a2 2 0 1 1 3.52-1.9L6.8 8.68C7.94 8.24 9.19 8 10.5 8h11C27.3 8 32 12.7 32 18.5V24a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5v-5.5c0-3.05 1.3-5.8 3.38-7.72zM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m5 2a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm5.26-9.55a2 2 0 0 1-3.52-1.9l3.5-6.5a2 2 0 0 1 3.52 1.9l-3.5 6.5z"></path>
              </svg>
            </div>
            <div class="avatar-image"><img/></div>
            <div class="avatar-border"></div>
          </div>
        </participant-avatar>
      </td>
    </tr>
  </tbody>
</table>
